<template>
  <!-- 逾期管理 -->
  <div class="container">
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <el-form :inline="true" :model="boxQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="出库单号">
          <el-input v-model="boxQueryParam.billNumber" placeholder="请输入出库单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="盒号/盒名">
          <el-input v-model="boxQueryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="boxOnSubmit">查询</el-button>
          <el-button @click="boxReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <el-form :inline="true" :model="archiveQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="出库单号">
          <el-input v-model="archiveQueryParam.billNumber" placeholder="请输入出库单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="档号/题名">
          <el-input v-model="archiveQueryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="archiveOnSubmit">查询</el-button>
          <el-button @click="archiveReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="盒逾期" name="box">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="boxTableData" border style="width: 100%" height="55vh" @sort-change="boxSortChange">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of boxTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" :sortable="item.sortable">
              <template #default="scope">
                <span v-if="item.prop === 'billNumber'">
                  <el-link type="primary" :underline="false" style="font-size: 12px" @click="labelDetail(scope.row)">
                    {{ scope.row[item.prop] }}
                  </el-link>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button link size="mini" @click="delayedReturn(row)">延期归还</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="档案逾期" name="archive">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="archiveTableData" border style="width: 100%" height="55vh" @sort-change="archiveSortChange">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of archiveTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width" :sortable="item.sortable">
              <template #default="scope">
                <span v-if="item.prop === 'billNumber'">
                  <el-link type="primary" :underline="false" style="font-size: 12px" @click="labelDetail(scope.row)">
                    {{ scope.row[item.prop] }}
                  </el-link>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button link size="mini" @click="delayedReturn(row)">延期归还</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <pagination ref="boxpagination" :totalCount="boxTotalCount" @pagination="boxPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <pagination ref="archivepagination" :totalCount="archiveTotalCount" @pagination="archivePagination"></pagination>
    </el-card>
    <out-bill-dialog ref="outBillDialog"></out-bill-dialog>
    <el-dialog title="延期归还" v-model="dialogFormVisible" width="40%" @close="closeDialog">
      <el-form :model="outForm" :rules="outFormRules" ref="outForm">
        <el-form-item label="预计归还日期" label-width="120px" prop="delayedDate">
          <el-date-picker v-model="outForm.delayedDate" type="date" style="width: 100%" :picker-options="pickerOptions"
            placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { overduePage, delayedReturn } from '@/api/rfid/outBill'
import outBillDialog from './dialog/outBillDialog.vue'
import moment from 'moment/moment'
export default {
  name: 'RFIDOverdue',
  components: { outBillDialog },
  data() {
    return {
      activeName: 'box',
      boxTotalCount: 0,
      //查询条件
      boxSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      boxQueryParam: {
        labelType: 1,
      },
      boxTableData: [],
      boxTableProps: [
        { title: '出库单号', prop: 'billNumber', width: '180', checked: true },
        { title: '盒号', prop: 'boxNo', width: '200', checked: true },
        { title: '盒名', prop: 'boxName', width: '', checked: true },
        { title: '出库日期', prop: 'outDate', width: '100', checked: true, sortable: true },
        {
          title: '预计归还日期',
          prop: 'planBackDate',
          width: '120',
          checked: true,
          sortable: true,
        },
        { title: '逾期天数', prop: 'overdueDays', width: '100', checked: true, sortable: true },
      ],
      // ============
      archiveTotalCount: 0,
      //查询条件
      archiveSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      archiveQueryParam: {
        labelType: 0,
      },
      archiveTableData: [],
      archiveTableProps: [
        { title: '出库单号', prop: 'billNumber', width: '180', checked: true },
        { title: '档号', prop: 'archiveNo', width: '150', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: '出库日期', prop: 'outDate', width: '100', checked: true, sortable: true },
        {
          title: '预计归还日期',
          prop: 'planBackDate',
          width: '120',
          checked: true,
          sortable: true,
        },
        { title: '逾期天数', prop: 'overdueDays', width: '100', checked: true, sortable: true },
      ],
      dialogFormVisible: false,
      outForm: {
        billNumber: '',
        planBackDate: '',
        delayedDate: '',
      },
      outFormRules: {
        delayedDate: [{ required: true, message: '请选择预计归还日期', trigger: 'change' }],
      },
      pickerOptions: {
        disabledDate(time) {
          // 禁用昨天及之前的日期
          const today = new Date()
          const yesterday = new Date(today)
          yesterday.setDate(today.getDate() - 1)
          return time.getTime() <= yesterday.getTime()
        },
      },
    }
  },
  mounted() {
    this.boxLoadData()
    this.archiveLoadData()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'archive') {
        this.archiveTableData = []
        this.archiveLoadData()
      } else if (tab.name === 'box') {
        this.boxTableData = []
        this.boxLoadData()
      }
    },
    labelDetail(row) {
      this.$refs.outBillDialog.show(row)
    },
    // ===================================档案盒===================================
    boxOnSubmit() {
      this.$refs.boxpagination.resetPagination()
    },
    boxReset() {
      this.boxQueryParam = {
        labelType: 1,
      }
      this.$refs.boxpagination.resetPagination()
    },
    boxSortChange({ column, prop, order }) {
      this.boxQueryParam.sortField = prop
      this.boxQueryParam.sortOrder = order
      this.boxLoadData()
    },
    boxLoadData() {
      var param = Object.assign(this.boxQueryParam, this.boxSearchModel)
      overduePage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.boxTableData = res.data.data.records
            this.boxTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    boxPagination(val) {
      this.boxSearchModel.pageNo = val.page
      this.boxSearchModel.pageSize = val.limit
      this.boxLoadData()
    },
    // ===================================档案===================================
    archiveOnSubmit() {
      this.$refs.archivepagination.resetPagination()
    },
    archiveReset() {
      this.archiveQueryParam = {
        labelType: 0,
      }
      this.$refs.archivepagination.resetPagination()
    },
    archiveSortChange({ column, prop, order }) {
      this.archiveQueryParam.sortField = prop
      this.archiveQueryParam.sortOrder = order
      this.archiveLoadData()
    },
    archiveLoadData() {
      var param = Object.assign(this.archiveQueryParam, this.archiveSearchModel)
      overduePage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.archiveTableData = res.data.data.records
            this.archiveTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    archivePagination(val) {
      this.archiveSearchModel.pageNo = val.page
      this.archiveSearchModel.pageSize = val.limit
      this.archiveLoadData()
    },
    delayedReturn(row) {
      this.outForm.billNumber = row.billNumber
      this.outForm.planBackDate = moment(row.planBackDate).format('YYYY-MM-DD')
      this.dialogFormVisible = true
    },
    closeDialog() {
      this.$refs['outForm'].resetFields()
      this.dialogFormVisible = false
    },
    submitForm() {
      this.$refs['outForm'].validate((valid) => {
        if (valid) {
          this.outForm.delayedDate = moment(this.outForm.delayedDate).format('YYYY-MM-DD')
          delayedReturn(this.outForm)
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success('延期归还成功')
                this.closeDialog()
                if (this.activeName === 'box') {
                  this.boxLoadData()
                } else if (this.activeName === 'archive') {
                  this.archiveLoadData()
                }
              } else {
                this.$message.warning(res.data.message)
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/tabs.less';

.el-form-item {
  margin-bottom: 0 !important;
}

.el-tabs__item {
  height: 50%;
}

.el-tabs__header {
  height: 60vh !important;
}
</style>
